<template>
    <div>
        <basic-container>
            <el-table
                :data="tableData"
                :header-cell-style="{
                    background: 'rgb(255, 191, 191)',
                    color: 'rgb(44,44,44)'
                }"
                stripe
            >
                <el-table-column label="序号" align="center">
                    <template slot-scope="scope">
                        <span v-text="getIndex(scope.$index)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="离职成员" align="center" prop="name"></el-table-column>
                <el-table-column label="离职时间" align="center" prop="resignedTime"></el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="checked(scope.row)">查看</el-button>
                        <el-button type="text" @click="inherited(scope.row)">继承</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="madp-pagination-wrap">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="page.current"
                    :page-sizes="[10, 20, 30, 50, 100]"
                    :page-size="page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="page.total"
                ></el-pagination>
            </div>
            <!-- 继承弹框 -->
            <el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false">
                <el-form :model="refForm" ref="refForm" class="madp-form" :inline="true">
                    <el-form-item>
                        <el-input placeholder="请输入成员姓名" v-model.trim="refForm.employee"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchFn">搜索</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="gridData"
                    ref="multipleTable"
                    :header-cell-style="{
                        background: 'rgb(255, 191, 191)',
                        color: 'rgb(44,44,44)'
                    }"
                    stripe
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column property="name" label="企业成员" align="center" width="150"></el-table-column>
                    <el-table-column property="status" label="激活状态" align="center" width="200"></el-table-column>
                    <el-table-column property="mobile" align="center" label="手机号码"></el-table-column>
                    <el-table-column property="position" align="center" label="职务"></el-table-column>
                </el-table>
                <div class="madp-transfer">
                    <el-button type="primary" @click="sureFn">确定</el-button>
                </div>
            </el-dialog>
        </basic-container>
    </div>
</template>
<script>
import { queryAllEmployees } from '@/api/customer/incumbency-succession';
import { resignedInherit, queryAllResignEmployees } from '@/api/customer/resignation-inheritance';
export default {
    props: [],
    data() {
        return {
            // 表格数据
            tableData: [],
            // 分页
            page: {
                current: 1, // 当前页
                pageSize: 10,
                total: 0
            },
            // 表格数据
            gridData: [],
            // 表格开关
            dialogTableVisible: false,
            // 表单
            refForm: {
                employee: ''
            },
            // 多选内容
            multipleSelection: []
        };
    },
    mounted() {
        this.getAllEmployeeList();
    },
    methods: {
        //获取表格序号
        getIndex($index) {
            return (this.page.current - 1) * this.page.pageSize + $index + 1;
        },
        //查询离职成员列表
        getAllEmployeeList() {
            let params = {
                status: 5,
                current: this.page.current,
                size: this.page.pageSize
            };
            queryAllEmployees(params).then((res) => {
                if (res.data.code === 0) {
                    this.tableData = res.data.data.records;
                    this.page.total = res.data.data.total;
                }
            });
        },
        // 点击查看
        checked(row) {
            this.$router.push({
                path: '/customer-info',
                query: { id: row.id }
            });
        },
        // 点击继承
        inherited(row) {
            this.dialogTableVisible = true;
        },
        // 条件查询
        searchFn() {
            let params = {
                name: this.refForm.employee,
                current: 1
            };
            queryAllEmployees(params).then((res) => {
                if (res.data.code === 0) {
                    this.gridData = res.data.data.records;
                }
            });
        },
        // 更改多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange() {},
        handleCurrentChange() {},
        sureFn() {
            this.dialogTableVisible = false;
            //             let params = {
            // newWxUserId://转接人id
            // groupId://客户群id
            //             }
            //             resignedInherit(params).then((res => {
            //                 if (res.data && res.data.code == 0) {
            //                     this.$message.success('转接成功！')
            //                 }
            //             }))
        }
    }
};
</script>
<style lang="scss" scoped>
.madp-pagination-wrap {
    float: right;
    margin: 20px;
}
.madp-transfer {
    margin-top: 80px;
    text-align: center;
}
</style>
